<template>
  <div>
    <b-container fluid class="banner d-none d-sm-block"></b-container>
    <b-container fluid>
      <b-row align-h="center">
        <b-col lg="11">
          <div class="content-nav d-none d-sm-block">
            <a-breadcrumb separator=">">
              <a-breadcrumb-item href="/">首页</a-breadcrumb-item>
              <a-breadcrumb-item>新闻动态</a-breadcrumb-item>
            </a-breadcrumb>
          </div>
          <b-container fluid>
            <b-row>
              <b-col md="2" class="d-none d-md-block">
                <a-menu
                  v-model="currentActiveCategories"
                  @select="onCategoryItemSelected"
                >
                  <a-menu-item :key="0">全部</a-menu-item>
                  <a-menu-item
                    v-for="category in newsCategories"
                    :key="category.id"
                  >
                    {{ category.name }}
                  </a-menu-item>
                </a-menu>
              </b-col>
              <b-col sm="12" class="d-md-none">
                <a-menu
                  v-model="currentActiveCategories"
                  mode="horizontal"
                  @select="onCategoryItemSelected"
                >
                  <a-menu-item :key="0">全部</a-menu-item>
                  <a-menu-item
                    v-for="category in newsCategories"
                    :key="category.id"
                  >
                    {{ category.name }}
                  </a-menu-item>
                </a-menu>
              </b-col>
              <!-- <b-col cols="12" class="d-sm-none">
                <a-popover
                  trigger="click"
                  v-model="menuCollapsed"
                  style="position: relative; top: 10px;"
                >
                  <a-menu
                    mode="inline"
                    v-model="currentActiveCategories"
                    @select="onCategoryItemSelected"
                    slot="content"
                  >
                    <a-menu-item :key="0">全部</a-menu-item>
                    <a-menu-item
                      v-for="category in newsCategories"
                      :key="category.id"
                    >
                      {{ category.name }}
                    </a-menu-item>
                  </a-menu>
                  <a-button type="primary">新闻分类</a-button>
                </a-popover>
              </b-col> -->
              <b-col cols="12" md="10">
                <news-list-no-wrapper
                  :news-list="newsList"
                  :img-domain="imgDomain"
                />
              </b-col>
            </b-row>
          </b-container>
        </b-col>
      </b-row>
    </b-container>
    <!-- <news-list :news-list="newsList" :img-domain="imgDomain" /> -->
    <div class="pagination">
      <a-pagination
        v-model="currentPage"
        :total="newsCount"
        @change="onPaginationChanged"
      />
    </div>
  </div>
</template>

<script>
import NewsListNoWrapper from '@/components/sections/NewsListNoWrapper';
import siteConfig from '@/assets/config/site';

const CATEGORY_API = `${siteConfig.apiPrefix}${siteConfig.apis.category}`;
const NEWS_API = `${siteConfig.apiPrefix}${siteConfig.apis.news}`;

export default {
  categoryAPI: CATEGORY_API,
  newsAPI: NEWS_API,
  components: {
    NewsListNoWrapper,
  },
  layout: 'staticBanner',
  data() {
    return {
      newsCategories: [],
      currentActiveCategories: [],
      newsList: [],
      newsCount: 0,
      imgDomain: '',
      currentPage: 1,
      pageSize: 12,
    };
  },
  computed: {
    currentActiveCategory() {
      if (this.currentActiveCategories.length === 0) {
        return 0;
      }
      return this.currentActiveCategories[0];
    },
  },
  async asyncData({ $axios }) {
    let newsCategories = [];
    const currentActiveCategories = [0];
    try {
      const data = (await $axios.$get(CATEGORY_API, {
        params: { type: 'news' },
      })).data;
      newsCategories = data.entries;
    } catch (err) {
      newsCategories = [];
    }
    // console.log('>>>>loaded:', newsCategories);
    let newsList = [];
    let newsCount = 0;
    let imgDomain = '';
    let currentPage = 0;
    let pageSize = 12;
    try {
      const data = (await $axios.$get(NEWS_API)).data;
      newsList = data.entries;
      newsCount = data.count;
      imgDomain = data.domain;
      currentPage = data.page + 1;
      pageSize = data.page_size;
    } catch (err) {
      newsList = [];
      newsCount = 0;
      imgDomain = '';
      currentPage = 0;
      pageSize = 12;
    }
    return {
      newsCategories,
      currentActiveCategories,
      newsList,
      newsCount,
      imgDomain,
      currentPage,
      pageSize,
    };
  },
  async mounted() {
    if (this.newsCategories.length === 0) {
      await this.loadNewsCategories();
    }
    if (this.currentPage === 0) {
      await this.loadNewsList();
    }
  },
  methods: {
    async loadNewsCategories() {
      try {
        const data = (await this.$axios.$get(this.$options.newsAPI, {
          params: { type: 'news' },
        })).data;
        this.productCategories = data.entries;
      } catch (err) {}
    },
    async loadNewsList(page = 1, category = 0) {
      try {
        const data = (await this.$axios.$get(this.$options.newsAPI, {
          params: {
            page: page - 1,
            category,
          },
        })).data;
        this.newsList = data.entries;
        this.newsCount = data.count;
        this.imgDomain = data.domain;
        this.currentPage = page;
        this.pageSize = data.page_size;
        // this.currentPage = parseInt(data.page) + 1;
      } catch (err) {
        this.$message.error('网络错误，请稍后再试');
      }
    },
    onCategoryItemSelected({ key }) {
      this.loadNewsList(1, key);
    },
    async onPaginationChanged(page) {
      await this.loadNewsList(page, this.currentActiveCategory);
    },
  },
};
</script>

<style lang="scss" scoped>
.banner {
  height: 330px;
  background-image: url('/images/header-bg.jpg');
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}
</style>

<style lang="scss" scoped>
.content-nav {
  margin: 24px 12px;
}
.pagination {
  margin: 24px 0px 36px;
  display: flex;
  justify-content: center;
}
</style>
